<nz-spin [nzSize]="'small'" [nzSpinning]="isSpinning">
    <div nz-row nzGutter="16">
        <div nz-col nzXs="24" nzSm="12" nzMd="8" class="mb-md">
            <nz-select style="width: 100%;" [(ngModel)]="selectedOption" (ngModelChange)="selectCurOption($event)" nzAllowClear>
                <nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option">
                    <ng-template #nzOptionTemplate>{{option.label}}</ng-template>
                </nz-option>
            </nz-select>
        </div>
        <div nz-col nzXs="24" nzSm="12" nzMd="8" class="mb-md">
            <div style="width: 33%;float: left;">
                <nz-badge [nzStatus]="'success'" [nzText]="'已经签到'"></nz-badge>
            </div>
            <div style="width: 33%;float: left;">
                <nz-badge [nzStatus]="'error'" [nzText]="'忘记签到'"></nz-badge>
            </div>
            <div style="width: 33%;float: left;">
                <nz-badge [nzStatus]="'processing'" [nzText]="'今天'"></nz-badge>
            </div>
        </div>
    </div>
    <div nz-row nzGutter="16" *ngIf="userAllSignInInfo != null">
        <div nz-col nzXs="24" nzSm="12" nzMd="8" class="mb-md" *ngFor="let clendar4SignIn of userAllSignInInfo.list">
            <app-calendar [clendar4SignIn]="clendar4SignIn" [curYear]="userAllSignInInfo.curYear" style="width: 100%;border: 1px solid rgb(217, 217, 217);border-radius: 4px;"></app-calendar>
        </div>
    </div>
</nz-spin>
